<template>
  <div class="table-container">
    <a-card
      :bordered="false"
      :body-style="{ padding: '0 12px' }"
      :header-style="{ padding: '0 12px' }"
    >
      <template #title> {{ t["尺寸管理"] }} </template>
      <TableHead />
      <a-table
        row-key="sizeId"
        :row-selection="{
          selectedRowKeys: sizeKeys
        }"
        :loading="sizeTable.loading"
        :data="sizeTable.data"
        :bordered="false"
        :pagination="{
          current: sizeQuery.pageNum,
          pageSize: sizeQuery.pageSize,
          total: sizeQuery.total
        }"
        @page-change="pageChange"
        :columns="translateColumns(columns.sizeColumns)"
      >
        <template #operation="{ record }">
          <div class="flex gap-2 justify-center">
            <a-dropdown-button size="mini" @click="sizeEdit(record.sizeId)">
              <IconEdit />

              <template #content>
                <a-menu>
                  <a-menu-item @click="sizeDelete(record.sizeId)">
                    <template #icon>
                      <IconDelete />
                    </template>
                    {{ t["删除"] }}
                  </a-menu-item>
                </a-menu>
              </template>
            </a-dropdown-button>
          </div>
        </template>
      </a-table>
    </a-card>
  </div>
</template>

<script setup lang="ts">
import columns from "../data/column";
import { sizeDelete, sizeEdit, sizeList } from "../data/curd";
import { sizeKeys, sizeQuery, sizeTable } from "../data/table";
import TableHead from "./table-head/TableHead.vue";

const t = translate("公共模块");

onMounted(async () => {
  await sizeList();
});
const pageChange = (page: number) => {
  sizeQuery.value.pageNum = page;
  sizeList();
};
</script>

<style lang="scss" scoped>
.table-container {
  height: 100%;
  background-color: white;
  padding: 12px;
  ::v-deep(.arco-card-header) {
    border: none;
  }
}
</style>
